import React,{Component} from 'react';
import './trade_nav.scss';
let startPoint = 0;
let startEle = 0;
let disX=0;
let left=0;
let box;
let width;
export default class Trnav extends Component{
	constructor (props) {
		super(props)
		this.state={
			trnav:['生活用品', '皮革制品', '生活小家电', '客房清洁', '汽车工具', '工业制品', '品质家纺', '母婴用品'],
			name:'glyphicon-down',
			hid:'hid',
			currentStatus: props.id
		}
	}
	up = () => {
		this.setState({
			name:this.state.name==='glyphicon-down'?'glyphicon-up':'glyphicon-down',
			hid:this.state.name==='glyphicon-down'?'':'hid'
		})
	}
	start = (e) => {
		box = document.getElementById('tr_nav');
		startPoint = e.changedTouches[0].pageX;
		startEle = box.offsetLeft;
		let left1=box.getElementsByTagName('li')[0];
		width=left1.offsetWidth;
	}
	move = (e) => {
		box = document.getElementById('tr_nav');
		let currPoint = e.changedTouches[0].pageX;
    disX = currPoint - startPoint;
    left = startEle + disX;
    if(left>0){
			box.style.left=0 + 'px';
		}else if(left<-width*4){
			box.style.left=-width*4 + 'px';
		}else if(left<=0&&left>=-width*4){
			box.style.left = left + 'px';
		}
	}
	nav_color (index) {
		this.setState({
			currentStatus:index
		})
	}
	componentDidMount () {
		// console.log(this.state.currentStatus)
	}
	render(){
		return(
			<div className="trade">
				<ul className="tr_nav" onTouchStart={this.start} onTouchMove={this.move} id="tr_nav">
					{
            this.state.trnav.map((item, i) => {
              return <li key={i} onClick={()=>{this.props._getMarkets(i+1,1);this.nav_color(i+1)}} className={this.state.currentStatus == (i+1) && 'active'}>{item}</li>
            })
          }
					<li></li>
				</ul>
				<span className={`glyphicon fixed ${this.state.name}`} onClick={this.up}></span>
				<div className="trade_content">
					<ul className={this.state.hid}>
						{
	            this.state.trnav.map((item, i) => {
	              return <li key={i} onClick={()=>{this.props._getMarkets(i+1,1);this.up();this.nav_color(i+1)}} className={this.state.currentStatus == (i+1) && 'active'}>{item}</li>
	            })
	          }
					</ul>
				</div>
			</div>
		)
	}
}